<template>
  <div class="iframe-container">
    <iframe id="myIframe" :src="url" />
  </div>
</template>

<script>



export default {



  data() {
    return {
      url: process.env.VUE_APP_BASE_SER_CH + ":3000"

    }
  },

  mounted() {
    /**
     * iframe-宽高自适应显示
     */
    function changeMobsfIframe() {
      const mobsf = document.getElementById('myIframe');
      const deviceWidth = document.body.clientWidth;
      const deviceHeight = document.body.clientHeight;
      mobsf.style.width = (Number(deviceWidth) - 220) + 'px'; //数字是页面布局宽度差值
      mobsf.style.height = (Number(deviceHeight) - 80) + 'px'; //数字是页面布局高度差
    }

    changeMobsfIframe()

    window.onresize = function () {
      changeMobsfIframe()
    }
  },



  async created() {

  },
  methods: {



  }
}
</script>

<style lang="scss" scoped>
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}

/* IFRAME 的容器 */
.iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* IFRAME 样式 */
#myIframe {
  width: 100%;
  height: 100%;
  border: none; /* 移除边框 */
}

/* 遮挡层样式 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 遮挡的高度 */
  background-color: white; /* 可以根据需要调整颜色 */
  z-index: 1; /* 确保遮挡层位于 IFRAME 之上 */
}
</style>
